<template>
  <view>
	<u-input class="u-m-l-20 u-m-r-10 u-m-b-20" v-model="boss" type="select" :select-open="show" border @click="show = true" placeholder="请选择老板" />
	<d-action-sheet :list="bossList" v-model="show" @click="selectBoss"></d-action-sheet>
    <view class="u-flex u-p-l-20 u-p-r-20">
      <u-input input-align="center" class="u-m-r-10" v-model="name" border placeholder="请输入商品名称" />
      <u-input input-align="center" class="u-m-r-10" type="number" v-model.trim="price" border placeholder="请输入商品价格" />
      <u-button size="medium" type="primary" style="width:160rpx;" @click="handleAddProduct">添加</u-button>
    </view>
    <view class="border-y u-text-center u-m-t-20 u-p-20">{{ boss }}商品列表</view>
    <view class="content u-text-center">
      <view class="u-flex u-p-20 border-y margin-top--1" style="background-color: #f5f5f5;font-weight:bold;">
        <view class="u-flex-1">商品</view>
		<view class="u-flex-1">价格</view>
        <view class="w30 ">操作</view>
      </view>
	  <view class="u-p-20 " v-if="productsList.length < 1">暂无数据</view>
      <view class="u-flex u-p-20 border-y margin-top--1" v-for="item in productsList" :key="item.name">
        <view class="u-flex-1 u-p-l-10 u-p-r-10">
          <text v-if="!item.update">{{ item.name }}</text>
          <u-input v-if="item.update" :focus="item.update" v-model="item.name" input-align="center" border></u-input>
        </view>
		<view class="u-flex-1 u-p-l-10 u-p-r-10">
		  <text v-if="!item.update">{{ item.price }}</text>
		  <u-input v-if="item.update" :focus="item.update" type="number" v-model.trim="item.price" input-align="center" border></u-input>
		</view>
        <view v-if="!item.update" class="w30">
          <u-button class="u-m-r-20" size="mini" type="primary" @click="item.update = true">{{ '修改' }}
          </u-button>
          <u-button size="mini" type="error" @click="handleDelete(item)">{{ '删除'}}</u-button>
        </view>
        <view v-if="item.update" class="w30">
          <u-button class="u-m-r-20" size="mini" @click="$set(item,'update',false)">取消</u-button>
          <u-button size="mini" type="primary" @click="handleUpdate(item)">确定</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dActionSheet from '../components/d-action-sheet.vue'
export default {
  components: { dActionSheet },
  data() {
    return {
      boss: '',
      show: false,
      name: '',
	  price:'',
      bossList: [],
	  productsList:[],
      updateName: ''
    }
  },
  created() {
    this.getBossList()
  },
  methods: {
	 // 选择老板
    selectBoss(index) {
      this.boss = this.bossList[index].name
	  this.getProductList()
    },
	// 获取商品列表
	async getProductList() {
		let id = this.bossList.filter(item=>item.name === this.boss)[0]._id
	  const res = await this.$u.get(`/products/${id}`)
	  this.productsList = res.map(item => {
	    item.update = false
	    return item
	  })
	},
    // 添加
    async handleAddProduct() {
      if (this.boss === '') {
        this.$u.toast('请先选择老板！')
        return
      }
      if (this.name === '') {
        this.$u.toast('请输入商品名称！')
        return
      }
	  if (this.price === '') {
	    this.$u.toast('请输入商品价格！')
	    return
	  }
	  let id = this.bossList.filter(item=>item.name === this.boss)[0]._id
      try {
        const res = await this.$u.post('/products', {
          bossId: id,
          name: this.name,
          price: this.price
        })
        this.$u.toast('添加成功')
        this.getProductList()
        this.name = ''
		this.price = ''
      } catch (err) {
        if (err.statusCode === 422) {
          this.$u.toast('已经存在，不能重复添加!');
        }
      }
    },
    // 获取老板列表
    async getBossList() {
      const res = await this.$u.get('/bosses')
      this.bossList = res.map(item => {
        item.text = item.name
        return item
      })
    },
    // 修改
    async handleUpdate(item) {
      const res = await this.$u.put(`/rest/products/${item._id}`, {
        name: item.name,
		price: item.price
      })
      this.$u.toast(res.message)
      this.getProductList()
    },
    // 删除
    async handleDelete(item) {
      uni.showModal({
        title: '警告',
        content: `确定要删除${item.name}吗？此操作不可恢复！`,
        success: async (res) => {
          if (res.confirm) {
            const res = await this.$u.delete(`/rest/products/${item._id}`)
            this.$u.toast(res.message)
            this.getProductList()
          }
        }
      })
    }

  }
}
</script>

<style>
.w30 {
  width: 30%;
}
</style>
